html,body,section,div,fieldset,ul{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    padding: 10px;
}
ul{
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 240px;
    height: 240px;
    background: #eee;
    margin: 20px;
}
li{
    outline: 0;
    background: blue;
    background-size: 100%;
    border: 1px solid #fff;
    box-sizing: border-box;
}
/*一个元素*/
li:only-child{
    height: 100%;
}
/*两个元素*/
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) + li{
    width: 50%;
    height: 50%;
}
li:first-child:nth-last-child(2) + li{
    margin-left: auto;
}

/*三个元素*/
li:first-child:nth-last-child(3){
    margin: auto;
}
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li{
    width: 50%;
    height: 50%;
}
li:first-child:nth-last-child(3) ~ li{
    float: left;
}
/*四个元素*/
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li{
    width: 50%;
    height: 50%;
    float: left;
}
/*五个元素 || 六个元素*/
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(6){
    width: 160px;
    height: 160px;
    float: left;
}
li:first-child:nth-last-child(5) ~ li,
li:first-child:nth-last-child(6) ~ li{
    width: 80px;
    height: 80px;
    float: left;
}
/* 7、 8、 9个元素*/
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(7) ~ li,
li:first-child:nth-last-child(8) ~ li,
li:first-child:nth-last-child(9) ~ li{
    width: 80px;
    height: 80px;
    float: left;
}

li:first-child:nth-last-child(7){
    float: none;
    margin: auto;
}

li:first-child:nth-last-child(8){
    margin-left: 40px;
}